<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3逐帧动画</title>
    <style>
        @keyframes run{
            0%{
                background-position: 0 0;
            }
            8.333%{
                background-position: -140px 0;
            }
            16.666%{
                background-position: -280px 0 ;
            }
            25.0%{
                background-position: -420px 0 ;
            }
            33.333%{
                background-position: -560px 0 ;
            }
            41.666%{
                background-position: -700px 0 ;
            }
            50.0%{
                background-position: -840px 0 ;
            }
            58.333%{
                background-position: -980px 0 ;
            }
            66.666%{
                background-position: -1120px 0 ;
            }
            75.0%{
                background-position: -1260px 0 ;
            }
            83.333%{
                background-position: -1400px 0 ;
            }
            91.666%{
                background-position: -1540px 0 ;
            }
            100%{
                background-position: 0 0 ;
            }
        }
        @-webkit-keyframes run{
            0%{
                background-position: 0 0;
            }
            8.333%{
                background-position: -140px 0;
            }
            16.666%{
                background-position: -280px 0 ;
            }
            25.0%{
                background-position: -420px 0 ;
            }
            33.333%{
                background-position: -560px 0 ;
            }
            41.666%{
                background-position: -700px 0 ;
            }
            50.0%{
                background-position: -840px 0 ;
            }
            58.333%{
                background-position: -980px 0 ;
            }
            66.666%{
                background-position: -1120px 0 ;
            }
            75.0%{
                background-position: -1260px 0 ;
            }
            83.333%{
                background-position: -1400px 0 ;
            }
            91.666%{
                background-position: -1540px 0 ;
            }
            100%{
                background-position: 0 0 ;
            }
        }
        div{
            width:140px;
            height:140px;
            background: url(images/swordsman.png) ;
            animation:run 1s linear infinite;
            animation-timing-function: step-start;
            /*-webkit-animation:run 1s steps(1, start) infinite;*/
        }
    </style>
</head>
<body>
<div></div>
</body>